<template>
    <div>

      <a-divider orientation="left">
        <span style="color: rgba(3, 129, 129, 1);">研究领域</span>
      </a-divider>
            <a-row style="margin-top: 20px;" type="flex" justify="center">
              <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
                <a-card :bordered="false" style="height: 260px;">
                  <div>
                    <div ref="fruitPieChart" style="height: 200px; width: 100%;"></div>
                  </div>
                </a-card>
              </a-col>
            </a-row>
            <a-row :gutter="16" style="margin-top: 20px;">
              <a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <a-card :bordered="false" style="height: 260px;">
                  <a slot="title" href="#" class="cardTit">专家单位分布</a>
                  <div>
                    <div ref="fruitBarChart" style=" height: 200px; width: 100%;"></div>
                  </div>
                </a-card>
              </a-col>
                <a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                    <a-card :bordered="false" style="height: 260px;">
                        <a slot="title" href="#" class="cardTit">专家成果时段对比</a>
                        <div>
                            <div ref="fruitLineChart" style=" height: 200px; width: 100%;"></div>
                        </div>
                    </a-card>
                </a-col>
        </a-row><br/>
    </div>
</template>

<script>

import {postAction} from "@/api/esManage";
import * as echarts from "echarts";
import womanPhoto from "@/views/talentCooperation/common/womanPhoto.png";
import manPhoto from "@/views/talentCooperation/common/manPhoto.png";
import unknownPhoto from "@/views/talentCooperation/common/unknownPhoto.png";

export default {
    name: 'TalentMenu',
    data() {
        return {
            cardHeight: 0,
            womanPhoto: womanPhoto,
            manPhoto: manPhoto,
            unknownPhoto: unknownPhoto,
            countResult: {},
            searchObj: {
                current: 1,
                pageNo: 1,
                pageSize: 10,
                searchType: 0,
                addFieldFlag: true,
                gwFields: []
            },
            fruitPieChart: null,
            isHaveRankData: false,
            coNumResultData: [],
            fruitNumResultData: [],
            pieDataText: '全部领域',
            numResultData: {},
            isHaveHotTalentData: false,
            hotTalentData: []
        }
    },
    computed: {},
    mounted() {
        this.getTalentDataGroupByField();
    },
    created() {
        this.cardHeight = (document.documentElement.clientHeight || document.body.clientHeight);
        this.getData();
    },
    methods: {
        getData(){
            this.getTalentDeptDistribute();
            this.getTalentFruitLineData();
            this.getRankResult();
            this.getNumResult();
            this.getHotTalentResult();
        },
        getTalentDataGroupByField() {
            let url = "/talents/getTalentFieldDistribute";
            postAction(url, {}).then(res => {
                if (res.data.success) {
                    this.buildPieTalentChart(res.data.result).then(() => {
                        this.addPieClick();
                    });
                }
            }).catch(err => {
                console.log(err)
            })
        },
        buildPieTalentChart(fruitData) {
            return new Promise((resolve) => {
                // 预设颜色数组
                const colors = [
                    "#33ba99", "#66ccaa", "#99ddbb", "#ccffdd",
                    "#336699", "#6699cc", "#99bbff", "#bbddff",
                    "#ff9966", "#ffcc99", "#ffddaa", "#ffeecc"
                ];
                this.fruitPieChart = echarts.init(this.$refs.fruitPieChart);
                let resData = fruitData.map((item, index) => ({
                    ...item,
                    value: item.count, // 重命名属性
                    itemStyle: { color: colors[index % colors.length] }
                }));
                // 从 series 数据中提取 legendData
                let legendData = fruitData.map(item => item.name);
                // 分割 legend 数据为左右两组
                let leftLegendData = legendData.slice(0, 6);
                let rightLegendData = legendData.slice(6);
                const maxCharsPerLine = 5;
                let wrappedText = '';
                let text = this.pieDataText;
                for (let i = 0; i < text.length; i += maxCharsPerLine) {
                    wrappedText += text.slice(i, i + maxCharsPerLine);
                    if (i + maxCharsPerLine < text.length) {
                        wrappedText += '\n';
                    }
                }
                this.fruitPieChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{c} ({d}%) <br/>{b}'
                    },
                    legend: [
                        {
                            orient: 'vertical', // 竖排列
                            left: '5%', // 精确设置左侧位置
                            top: 'center', // 垂直居中
                            data: leftLegendData
                        },
                        {
                            orient: 'vertical', // 竖排列
                            right: 'left', // 右侧显示
                            top: 'center', // 垂直居中
                            data: rightLegendData
                        }
                    ],
                    graphic: [
                        {
                            type: 'circle',
                            left: 'center',
                            top: 'center',
                            shape: {
                                r: 45
                            },
                            style: {
                                fill: '#e5f7f3',
                                opacity: 0.8
                            }
                        },
                        {
                            type: 'text',
                            left: 'center',
                            top: 'center',
                            style: {
                                text: wrappedText,
                                fontSize: 13,
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'pie',
                            radius: [45, 80],
                            label: {
                                show: false,
                            },
                            emphasis: {
                                scale: true,
                                scaleSize: 20,
                                label: {
                                    show: false,
                                    fontSize: 20,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            data: resData
                        }
                    ]
                }, true);
                const that = this;
                window.addEventListener("resize",function(){
                    that.fruitPieChart.resize();
                });
                resolve();
            });
        },
        addPieClick(){
            // 监听饼图的点击事件
            let that = this;
            this.fruitPieChart.on('click', function (params) {
                if(params.data.name){
                    if(params.data.name === that.pieDataText){
                        //第二次点击
                        that.pieDataText = '全部领域';
                    }else{
                        that.pieDataText = params.data.name;
                    }
                    that.updateChartText(that.pieDataText);
                }
            });
        },
        updateChartText(text) {
            const maxCharsPerLine = 5;
            let wrappedText = '';
            for (let i = 0; i < text.length; i += maxCharsPerLine) {
                wrappedText += text.slice(i, i + maxCharsPerLine);
                if (i + maxCharsPerLine < text.length) {
                    wrappedText += '\n';
                }
            }
            let that = this;
            this.fruitPieChart.setOption({
                graphic: [
                    {
                        type: 'circle',
                        left: 'center',
                        top: 'center',
                        shape: {
                            r: 45
                        },
                        style: {
                            fill: '#e5f7f3',
                            opacity: 0.8
                        },
                        onclick: function () {
                            console.log('中间区域被点击了');
                            //第二次点击
                            that.pieDataText = '全部领域';
                            that.updateChartText(that.pieDataText);
                        }
                    },
                    {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        style: {
                            text: wrappedText,
                            fontSize: 12,
                            textAlign: 'center'
                        },
                        onclick: function () {
                            console.log('中间文字被点击了');
                            //第二次点击
                            that.pieDataText = '全部领域';
                            that.updateChartText(that.pieDataText);
                        }
                    }
                ]
            }, false);
            // 更新数据
            this.searchObj.gwFields = [];
            if(that.pieDataText != '全部领域'){
                this.searchObj.gwFields.push(that.pieDataText);
            }
            this.getData();
        },
        getTalentDeptDistribute() {
            let url = "/talents/getTalentDeptDistribute";
            postAction(url, this.searchObj).then(res => {
                if (res.data.success) {
                    this.buildBarTalentChart(res.data.result);
                }
            }).catch(err => {
                console.log(err)
            })
        },
        buildBarTalentChart(fruitData) {
            let fruitBarChart = echarts.init(this.$refs.fruitBarChart);
            let xAxisData = fruitData.map(item => {
                return item.name
            })
            let seriesData = fruitData.map(item => {
                return item.count
            })
            fruitBarChart.setOption({
                grid: {
                    // 调整距离
                    left: '35%', // 左
                    right: '5%', // 右
                    bottom: '30%', // 下
                    top: '4%', // 上
                },
                yAxis: {
                    type: 'category',
                    data: xAxisData.reverse(),
                    axisLabel: {
                        color: '#000',
                        interval: 0,
                        width: 100,
                        overflow: 'truncate', // 设置文本溢出处理方式
                        ellipsis: '...' // 设置文本溢出的省略号
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                xAxis: {
                    type: 'value',
                    interval: 2000,
                },
                tooltip: {
                    trigger: 'axis',
                    extraCssText: 'z-index: 7',
                    backgroundColor: '#FFFFFF',
                    textStyle: {
                        color: '#3c3520'
                    }
                },
                series: [
                    {
                        data: seriesData.reverse(),
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            color: '#61a5e8'
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#61a5e8'
                            }
                        },
                    }
                ]
            }, true);

            setTimeout(function () {
                fruitBarChart.resize();
            }, 10)
        },

        getTalentFruitLineData() {
            let url = "/talents/getTalentFruitNumDistribute";
            postAction(url, this.searchObj).then(res => {
                if (res.data.success) {
                    this.buildTalentFruitLineChart(res.data.result);
                }
            }).catch(err => {
                console.log(err)
            })
        },
        buildTalentFruitLineChart(fruitData) {
            let fruitLineChart = echarts.init(this.$refs.fruitLineChart);
            fruitLineChart.setOption({
                grid: {
                    // 调整距离
                    left: '15%', // 左
                    right: '2%', // 右
                    bottom: '15%', // 下
                    top: '10%', // 上
                },
                legend: {
                    data: ['今年', '去年']
                },
                xAxis: {
                    type: 'category',
                    data: fruitData.xData,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value) {
                            return value + '月'
                        }
                    },
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                    extraCssText: 'z-index: 7',
                    backgroundColor: '#FFFFFF',
                    textStyle: {
                        color: '#3c3520'
                    },
                    formatter: function (params) {
                        let tooltipStr = params[0].name + '月<br/>';
                        params.forEach((param) => {
                            tooltipStr += `${param.seriesName}: ${param.value}<br/>`;
                        });
                        return tooltipStr;
                    }
                },
                series: [
                    {
                        name: '今年',
                        data: fruitData.currentYearData.length == 0 ? [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] : fruitData.currentYearData,
                        type: 'line'
                    },
                    {
                        name: '去年',
                        data: fruitData.lastYearData.length == 0 ? [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] : fruitData.lastYearData,
                        type: 'line'
                    }
                ]
            }, true);

            setTimeout(function () {
                fruitLineChart.resize();
            }, 10)
        },
        getRankResult() {
            let url = "/talents/getRankResult";
            this.isHaveRankData = false;
            postAction(url, this.searchObj).then(res => {
                if (res.data.success) {
                    this.isHaveRankData = true;
                    this.coNumResultData = res.data.result.coNumResultData;
                    this.fruitNumResultData = res.data.result.fruitNumResultData;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getNumResult() {
            let url = "/talents/getNumResult";
            postAction(url, this.searchObj).then(res => {
                if (res.data.success) {
                    this.numResultData = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getHotTalentResult() {
            let url = "/talents/manage/pageList";
            let that = this;
            this.isHaveHotTalentData = false;
            postAction(url, this.searchObj).then(res => {
                if (res.data.success) {
                    this.isHaveHotTalentData = true;
                    let data = res.data.result.records;
                    const result = [];
                    for (let i = 0; i < data.length; i += 5) {
                        result.push(data.slice(i, i + 5));
                    }
                    that.hotTalentData = result;
                }
            }).catch(err => {
                console.log(err)
                this.isHaveHotTalentData = true;
            })
        },
        toInfo(id, name) {
            const routeUrl = this.$router.resolve({
                name: 'esTalentInfo',
                query: {"t": id, 'c': name}
            });
            window.open(routeUrl.href, '_blank');
        },
    }
}
</script>

<style scoped>
    /deep/ .ant-card-body {
        padding: 20px !important;
    }

    /deep/ .ant-card-head {
        min-height: 20px !important;
    }

    /deep/ .ant-card-head-title {
        padding: 5px 0 !important;
    }

    /deep/ .ant-carousel .slick-dots li button{
        background: #000 !important;
    }
    /deep/ .ant-carousel .slick-dots-bottom {
        bottom: -15px !important;
    }
    /deep/ .ant-carousel .slick-slide {
        text-align: center;
        background: #fff;
        overflow: hidden;
    }
    .headerDiv {
        background-color: #fff;
        border-bottom: 1px solid #33ba99;
        padding: 15px;
    }

    .headerTitle {
        color: #33ba99;
        line-height: 32px;
        font-size: 25px;
        font-weight: bold;
    }

    .c-title {
        min-height: 25px;
        vertical-align: bottom;
        display: flex;
        align-items: flex-end;
        text-align: center;
    }
    .parent{
        font-size: 20px;
    }
    .child{
        color: #34bb99;
    }
    .t-txt{
        width: 100%;
        text-align: center;
    }

    .count_h {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 70px;
    }

    .rank_title {
        padding: 5px;
        text-align: center;
        color: #fff;
    }

    .rank_content {
        padding: 5px;
        text-align: center;
    }

</style>